<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>便民服务平台3.0</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.min.css">
</head>

<body>
<div class="loginArea">
	<div class="login-box lg-static">
    	<div class="login-hd">
        	<h1>帐号登录</h1>
            <h3>还没有帐号<a href="#" target="_blank">立即注册</a></h3>
        </div>
        <div class="login-bd">
        	<ul>
            	<li><input name="" type="text" class="lg-phoneNumber" placeholder="手机号码"></li>
                <li><input name="" type="text" class="lg-password" placeholder="密码"></li>
            </ul>
            <p class="forgetPassword"><a href="#">忘记密码？</a></p>
            <div class="login-btn"><button class="btn btn-green btn-block">登 录</button></div>
        </div>
        <div class="login-ft">
        	<p>第三方帐号直接登录</p>
            <a href="#" class="lg-sina">微博帐号登录</a>
            <a href="#" class="lg-qq">QQ帐号登录</a>
        </div>
    </div>
    
    <div class="login-box lg-quick">
    	<div class="login-hd">
        	<h1>扫码登录</h1>
        </div>
        <div class="login-bd">
        	<div class="qrcode-img">
            	<img src="images/login-qrcode.png">
            </div>
        </div>
        <div class="login-ft">
        	<h3><i></i>打开掌上公安APP，扫一扫登录更安全</h3>
            <div class="lg-agreement">
            	<label class="i-checked checked"><i></i><input name="" type="checkbox" value=""></label>
            	我同意并已阅读<a href="#">《便民服务平台服务协议》</a>
            </div>
        </div>
    </div>
    <div class="login-switch">
        <i class="login-quick"></i>
        <i class="login-static"></i>
    </div>
</div>
<script src="js/lib/jquery-3.1.0.js"></script>
<script>

	$(function(){
		$(".login-switch > i:first").addClass("active");
		$(".loginArea > .login-box").not(":first").hide();
		$(".login-switch > i").unbind("click").bind("click", function(e){
			$(this).siblings().addClass("active").end().removeClass("active");
			if(e.target.className=="login-quick"){
				$(".lg-quick").show();
				$(".lg-static").hide();
			} else {
				$(".lg-static").show();
				$(".lg-quick").hide();
			}
	   });
	   //默认选择登录协议
	   $(".i-checked").click(function(){
		    if($(this).find("input").is(':checked')){
			   $(this).removeClass("checked");
	    	}else {
				$(this).addClass("checked");	
			}
			
	   });
	   
	})
	
	
	$(".login-btn > button").click(function(){
		window.parent.loginMess();
		//window.parent.$(".popup").remove();
	});
	
</script>
</body>
</html>
